<!--
 @description 原商家门店
 @fileName OriginalStore.vue
 @author zengqiongying
 @created 2023/12/27 16:54:59
-->
<template>
  <div>
    <Card v-for="(item, i) in list" :key="`${i}-${item.code}`" :title="`门店${i + 1}`" style="margin-top: 0">
      <template #title>
        <div class="card-header">
          <div class="name">{{ item.code }}</div>
          <div>{{ item.shopAddr }}</div>
        </div>
      </template>
      <!-- <Cell title="原门店编码" :modelValue="item.code" readonly defaultValue="--" />
      <Cell title="原门店地址" :modelValue="item.shopAddr" :custom="true" readonly defaultValue="--" /> -->
      <template v-if="readonly">
        <Cell
          title="原门店地址"
          :modelValue="[1, '1'].includes(item.isNewBusinessTakeover) ? '是' : '否'"
          readonly
          defaultValue="--"
        />
      </template>
      <template v-else>
        <FieldSelect
          v-model="list[i].isNewBusinessTakeover"
          title="新商是否接管"
          label-name="dictName"
          value-name="dictCode"
          :optionData="[
            { dictName: '是', dictCode: '1' },
            { dictName: '否', dictCode: '0' }
          ]"
          required
        />
      </template>
    </Card>
    <Card v-if="list.length === 0 && readonly" no-mg :round="false" style="margin-top: 1px">
      <qmp-empty description="暂无门店信息" image-size="60px" />
    </Card>
  </div>
</template>

<script lang="ts">
  import { reactive, toRefs, defineComponent, watch } from 'vue'
  import Card from '@/components/Card/index.vue'
  import Cell from '@/components/Cell/index.vue'
  import FieldSelect from '@/components/FieldSelect/index.vue'
  import { queryShopByChangeCode } from '@/apis/ctmCustomerChange/index'
  interface anyObjectModle {
    [key: string]: any
  }
  export default defineComponent({
    name: 'DealerInfoTerminationTakeOriginalStore',
    components: { Card, Cell, FieldSelect },
    props: {
      changeCode: {
        type: String,
        default: ''
      },
      readonly: {
        type: Boolean,
        default: false
      },
      dataList: {
        type: Array,
        default: () => []
      }
    },
    setup(props, { emit }) {
      const datas = reactive<anyObjectModle>({
        list: [
          /* {
            id: '1111',
            code: '32132',
            shopAddr: '四川省成都市青羊区成飞大道189号1',
            isNewBusinessTakeover: 0,
            shopName: '',
            shopInfoPhone: '',
            shopServPhone: '',
            licenseList: [],
            agreementList: []
          },
          {
            id: '2222',
            code: '321322',
            shopAddr: '四川省成都市青羊区成飞大道189号2',
            isNewBusinessTakeover: 0,
            shopName: '',
            shopInfoPhone: '',
            shopServPhone: '',
            licenseList: [],
            agreementList: []
          },
          {
            id: '3333',
            code: '3213222',
            shopAddr: '四川省成都市青羊区成飞大道189号3',
            isNewBusinessTakeover: 0,
            shopName: '',
            shopInfoPhone: '',
            shopServPhone: '',
            licenseList: [],
            agreementList: []
          } */
        ]
      })

      const getDetail = () => {
        let changeCode = props.changeCode || ''
        if (!changeCode) return
        queryShopByChangeCode(changeCode).then((res: any) => {
          const list = res.data || []
          datas.list = list.map((v: any) => {
            return { ...v, ...{ isNewBusinessTakeover: [1, '1'].includes(v.isNewBusinessTakeover) ? 1 : 0 } }
          })
        })
      }
      const getDataList = () => {
        return datas.list.map((v: any) => {
          return {
            id: v.id,
            code: v.code, // 原店铺编码
            originalCode: v.originalCode,
            originalBusinessType: v.originalBusinessType, // 原经营类型
            originalOperateArea: v.originalOperateArea, // 原经营面积
            originalShopAddr: v.originalShopAddr, //原店铺地址
            businessType: v.businessType, // 原经营类型
            operateArea: v.operateArea, // 原经营面积
            shopAddr: v.shopAddr, //原店铺地址
            isNewBusinessTakeover: [1, '1'].includes(v.isNewBusinessTakeover)
              ? 1
              : [0, '0'].includes(v.isNewBusinessTakeover)
              ? 0
              : ''
          }
        })
      }
      const resetDataList = () => {
        datas.list = props.dataList.map((v: any) => {
          return {
            ...v,
            ...{
              code: v.code,
              shopAddr: v.shopAddr,
              isNewBusinessTakeover: [1, '1'].includes(v.isNewBusinessTakeover)
                ? 1
                : [0, '0'].includes(v.isNewBusinessTakeover)
                ? 0
                : ''
            }
          }
        })
      }

      watch(
        () => props.changeCode,
        (d) => {
          // getDetail()
          resetDataList()
        },
        {
          immediate: true
        }
      )

      // getDetail()

      return {
        ...toRefs(datas),
        getDataList
      }
    }
  })
</script>
<style lang="less" scoped>
  .card-header {
    font-weight: bold;
    font-size: 12px;
    line-height: 1.4;
    .name {
      margin-bottom: 5px;
    }
  }
</style>
